<template>
  <div class='login-page' @keyup.enter="onSubmit">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>登录</span>
  
 
  </div>
   <el-form :rules="loginRules" ref='formInfo' label-position="top" label-width="80px" :model="formLabelAlign">
  <el-form-item prop="username" label="账号">
    <el-input  v-model="formLabelAlign.username"></el-input>
  </el-form-item>
  <el-form-item prop="password" label="密码">
    <el-input v-model="formLabelAlign.password"></el-input>
  </el-form-item>
 <el-form-item class="login">
    <el-button type="primary" @click="onSubmit">批阅奏章</el-button>
    <el-button @click="reset">重置</el-button>
  </el-form-item>
</el-form>
</el-card>

  </div>
</template>

<script>
import router from '../router'

export default {
data() {
    return {
        formLabelAlign: {
            username:'',
            password:''
        },
          loginRules: {
        username: [
           { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          // { validator: checkMobile, trigger: 'blur' }
        ],
        password: [
           { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
    //   loading: false,
    //   passwordType: 'password',
    //   redirect: undefined
    }
},
methods: {
   async onSubmit() {
    try{
 await this.$refs.formInfo.validate()
       console.log('校验成功');
       
    
         this.$message({
          message: '恭喜你，登录成功',
          type: 'success'
        });
    await    this.$store.dispatch('user/setToken',this.formLabelAlign)
      // console.log(data.data.token
      // );
       this.$router.push('/')
       
    }

    catch{
        console.log('不通过');
    }
      
    },
    reset(){
     this.$refs.formInfo.resetFields()
    }
},
}
</script>

<style scoped>
::v-deep .el-card__header{
    background-color: purple;
    color:white;
    text-align: center;
}
.login-page{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

     background-image: url('~@/assets/login.jpg');
  background-size:cover ;
}
.box-card{
    width: 50%;
}
.login{
   /* float: right; */
   text-align: center;
   /* padding-left:px ; */
}

</style>